<template>
	<w-container id="container">
		<!-- 自定义导航 -->
		<w-navbar id="navbarStyle"></w-navbar>
		<w-image :src="logo" width="203" height="203" style="margin: 0 auto;"></w-image>
		<!-- 中心区域 -->
		<view class="login_center">
			<view class="title">
				<view class="font-size-18 font-color-222 font-w-600">设置新密码</view>
			</view>
			<view class="flex flex-ai-center">
				<w-icon name="login_password" size="20"></w-icon>
				<text class="font-color-textPrimary font-size-16 font-w-500 ml-5">密码</text>
			</view>
			<view class="iptStyle mt-10">
				<u-input v-show="ispwd" :password="true" v-model="form.newpassword" :customStyle="iptStyle" clearable
					placeholder="请输入新密码" border="bottom" fontSize="14" color="#000">
					<template slot="suffix" v-if="form.newpassword">
						<w-icon name="eye-off" color="#909399" @click="ispwd=!ispwd" size="18"></w-icon>
					</template>
				</u-input>
				<u-input v-show="!ispwd" :password="false" v-model="form.newpassword" :customStyle="iptStyle" clearable
					placeholder="请输入新密码" border="bottom" fontSize="14" color="#000">
					<template slot="suffix" v-if="form.newpassword">
						<w-icon name="eye-fill" color="#909399" @click="ispwd=!ispwd" size="18"></w-icon>
					</template>
				</u-input>
			</view>
			<view class="iptStyle mt-20">
				<u-input v-show="ispwd2" :password="true" v-model="form.re_password" :customStyle="iptStyle" clearable
					placeholder="请再次输入新密码" border="bottom" fontSize="14" color="#000">
					<template slot="suffix" v-if="form.re_password">
						<w-icon name="eye-off" color="#909399" @click="ispwd2=!ispwd2" size="18"></w-icon>
					</template>
				</u-input>
				<u-input v-show="!ispwd2" :password="false" v-model="form.re_password" :customStyle="iptStyle" clearable
					placeholder="请再次输入新密码" border="bottom" fontSize="14" color="#000">
					<template slot="suffix" v-if="form.re_password">
						<w-icon name="eye-fill" color="#909399" @click="ispwd2=!ispwd2" size="18"></w-icon>
					</template>
				</u-input>
			</view>
			<view class="hint">密码内需同时包含数字、字母，长度在6-12之间</view>
			<w-button class="login_btn" type="colorful" shape="circle" @click="confim">确认</w-button>
		</view>
		<!-- 底部协议 -->
		<view class="agreement">

		</view>
	</w-container>
</template>

<script>
	import {
		resetLoginPwd
	} from '@/api/user/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				ispwd: true, //  验证码状态
				ispwd2: true, //  验证码状态
				iptStyle: { //  输入框样式
					'height': '80rpx',
					'padding': '0'
				},
				form: {
					mobile: '',
					captcha: '',
					newpassword: '',
					re_password: ''
				}
			};
		},
		computed: {
			...mapState('config', {
				logo(state) {
					return state.info.appLogo
				},
			})
		},
		onLoad(e) {
			this.form.mobile = e.mobile;
			this.form.captcha = e.code;
		},
		methods: {
			confim() {
				if (!this.form.newpassword) {
					uni.$u.toast('请输入新密码');
				} else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/.test(this.form.newpassword)) {
					uni.$u.toast('密码内需同时包含数字、字母，长度在6-12之间');
				} else if (!this.form.re_password) {
					uni.$u.toast('请再次输入新密码');
				} else if (this.form.newpassword != this.form.re_password) {
					uni.$u.toast('两次输入的密码不一致');
				} else {
					resetLoginPwd(this.form).then(res => {
						uni.showToast({
							title: res.msg,
							success() {
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/login/login"
									})
								}, 1500)
							}
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	#container {
		background-image: url($IMG_URL + '/static/bg/loginbg.png');
		background-size: 100% auto;
		@extend .flex, .flex-dir-col;
		background-repeat: no-repeat;
	}

	#navbarStyle /deep/ .u-navbar__content {
		background-image: url($IMG_URL + '/static/bg/loginbg.png');
		background-position: top;
		background-size: 100% auto;
	}

	.login_center {
		width: 100%;
		position: absolute;
		height: 65vh;
		background-color: #fff;
		border-radius: 60rpx 60rpx 0 0;
		bottom: 0;
		@extend .pt-26, .plr-40;

		>.title {
			width: 100%;
			text-align: center;
			margin-bottom: 284rpx;
		}

		>.iptStyle {
			width: 100%;
			background: rgba(0, 0, 0, 0.06);
			border-radius: 64rpx;
			padding: 0 30rpx;

			.u-border-bottom {
				border-color: transparent !important;
			}
		}

		>.hint {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			@extend .font-size-10, .font-color-minor;
		}

		>.login_btn {
			width: 100%;
			margin-top: 96rpx;
			// box-shadow: 0 20rpx 30rpx rgba(223, 0, 7, .1);
		}

	}

	.agreement {
		width: 100%;
		padding: 0 80rpx 40rpx;
	}
</style>